<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="screen-orientation" content="portrait" />
  <meta name="x5-orientation" content="portrait">
  <title>抖音图片选择器</title>
  <link rel="stylesheet" href="./static/css/index.css">
</head>

<body>
  <div id="root" class="root">
    <button id="startBtn" class="btn" disabled="disabled">打开摄像头</button>
    <button id="closeBtn" class="btn closeBtn hidden">关闭摄像头</button>
    <!-- <div class="start">
      <label for="openUserCamers">开始</label>
      <input type="file" id="openUserCamers" capture="camera" accept="video/*" />
    </div> -->

    <div id="warn" class="warn hidden">请调整好摄像头位置</div>

    <div id="imgSelectWrap" class="imgSelectWrap hidden">
      <div class="inWrap">
        <span class="txt">你最终的选择是</span>
        <div class="heart" id="heart">
          <svg class="vL6BBg" viewBox="0 0 64 57.148620619811254" style="overflow: hidden;">
            <path class="SQ2ADw _682gpw"
              d="M2.53725,9.124940664586912C-2.65195,17.849351139515548 1.00387,26.34112590807825 5.59813,30.848111052816368L32.4604,57.148620619811254L58.7557,30.942100123514304C63.0287,26.093754021681065 64.6666,20.950990472547556 63.7569,15.224494584225967C62.5004,7.30287935745413 56.1037,1.1569738244480787 48.2017,0.27934041656747244C43.3553,-0.248088 38.6736,1.1464625602983636 35.0197,4.24508118052618C34.0362,5.078797914482626 33.1572,6.010861301459272 32.3911,7.023943063275326C31.4821,5.870469591840211 30.4163,4.815322363203646 29.2108,3.8801770327578597C25.009,0.6213636853551353 19.6604,-0.658994 14.5228,0.3337673341302651C9.65689,1.2930385670773543 5.28924,4.4961881374853006 2.53725,9.124940664586912"
              fill="#cb6ce6" style="touch-action: pan-x pan-y pinch-zoom;"></path>
          </svg>
        </div>
        <div class="left" id="left">
          <img src="" alt="img">
        </div>
        <div class="right" id="right">
          <img src="" alt="img">
        </div>
      </div>
    </div>


    <div style="position: relative;width: 100%;height: 100%;">
      <video id="video" class="video" playsinline autoplay muted style="object-fit:cover"></video>
      <canvas id="overlay" class="overlay"></canvas>
    </div>

  </div>
</body>

</html>
